<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<!-- 
    定位属性的总结：相对、绝对、固定、粘性
        相对定位    
            - 相对于自身位置进行偏移
            - 不脱离文档流
        绝对定位
            - 参照物
                - 如果有父级，就相对于父级
                - 如果没有父级，就相对于html 浏览器
            - 脱离文档流的
        固定定位
            - 相对于浏览器进行偏移
            - 脱离文档流
        粘性定位
            - 结合相对定位个固定(绝对)定位
            - 不脱离文档流、相对浏览器
        
        需要注意点
            - 元素、参照物、方向
            - 定位属性不要大面积使用！！

        需求:
            有三个小盒子，让盒子重叠在一起~

 -->